<template>
  <div>

  <div style="text-align: right;">
    <el-button type="primary" @click="reset()" size="small">重置</el-button>
    <el-button type="average" @click="getMapsum()" size="small">总分</el-button>
  </div>
  <div style="width: auto;height: 600px" id="main"></div>
  </div>
</template>

<script>
// 通过this.$echarts来使用
  export default {
    data () {
      return {
        scData: [], // School of Computing  计算机科学与信息技术学院
        semData: [], // School of Management and Economics  经济管理学院
        semeData: [], // School of Electrical Mechanical Engineering 机电工程学院
        smsData: [], // School of Mathematical Sciences 数学科学学院
        sflData: [], // School of Foreign Languages 外国语学院
        scmeData: [], // School of Chemical and Materials Engineering 化学工程学院
        ssaData: [], // School of Sports Academy  体育学院
        labourData: [], // 劳动养成
        integrityData: [], // 学生诚信
        moralityData: [], // 思想道德
        standardData: [], // 日常规范
        civilizationData: [], // 言行文明
        MapData: [],
        reasonMap: new Map(),
        reasonList: [],
        levelFirst: '',
        firstList: [],
        levelSecond: '',
        secondList: [],
        levelThird: '',
        thirdList: [],
        levelFourth: '',
        fourthList: [],
        copyDept: '',
        source: '',
        dataList: [], // 整个树表
        erDataList: [], // 存二级表
        sanDataList: [], // 存三级表
        options: [{
          value: '大庆师范学院',
          label: '大庆师范学院'
        }],
        temp: {
          value: '',
          label: ''
        },
        value1: '', // 学院
        value2: '', // 年级
        value3: '', // 班级
        v2length: 0,
        start: '',
        end: '',
        nameX: [], // 存入机构名称
        valueY: [], // 存入机构的总分或者平均分
        valueSUM: [], // 存入机构的总分
        valueAVG: [], // 存入的平均分
        params: {
          institute: '',
          grade: '',
          classe: ''
        },
        data: {
          ids: '',
          flag: ''
        }
      }
    },
    name: 'page',
    mounted () {
    // 在通过mounted调用即可
      this.source = this.firstList
      this.$http({
        url: '/graph/Graph/byInstituteContrastAve',
        method: 'post',
        params: {
          institute: '',
          grade: '',
          classe: '',
          startDate: '',
          endDate: ''
        }
      }).then(({data}) => {
        this.reasonMap = data.hashmap
        // 获取加分原因
        for (var key in this.reasonMap) {
          this.reasonList.push(key)
        }
        this.echartsInit()
      })
      this.getTree()
    },
    methods: {
      getMapave () {
        this.re()
        this.source = this.firstList
        this.$http({
          url: '/graph/Graph/byInstituteContrastAve',
          method: 'post',
          params: {
            institute: '',
            grade: '',
            classe: '',
            startDate: '',
            endDate: ''
          }
        }).then(({data}) => {
          this.reasonMap = data.hashmap
          this.echartsInit()
        })
        this.getTree()
      },
      getMapsum () {
        this.re()
        this.source = this.firstList
        this.$http({
          url: '/graph/Graph/byInstituteContrast',
          method: 'post',
          params: {
            institute: '',
            grade: '',
            classe: '',
            startDate: '',
            endDate: ''
          }
        }).then(({data}) => {
          this.reasonMap = data.hashmap
          this.echartsInit()
        })
        this.getTree()
      },
      re () {
        this.MapData = []
        this.nameX = []
        this.valueY = []
        this.labourData = []
        this.integrityData = []
        this.moralityData = []
        this.standardData = []
        this.civilizationData = []
      },
      reset () {
        this.re()
        this.value1 = ''
        this.value2 = ''
        this.params.classe = ''
        this.params.institute = ''
        this.params.grade = ''
        this.params.endDate = ''
        this.params.startDate = ''
        this.start = ''
        this.end = ''
        this.getMapave()
      },
      getTree () {
        this.$http({
          url: '/sys/office/treeData',
          method: 'get'
        }).then(({data}) => {
          // 把整个子节点都存到树表中
          this.dataList = data.treeData[0].children
          this.getNext()
        })
      },
      getNext () {
        for (let i = 0; i < this.dataList.length; i++) {
          this.firstList.push(this.dataList[i].name)
        }
      },
      // 初始化echarts
      echartsInit () {
        var app = {}
        var chartDom = document.getElementById('main')
        var myChart = this.$echarts.init(chartDom)
        var option
      // 控制图上标签的上下左右位置的参数
        const posList = [
          'left',
          'right',
          'top',
          'bottom',
          'inside',
          'insideTop',
          'insideLeft',
          'insideRight',
          'insideBottom',
          'insideTopLeft',
          'insideTopRight',
          'insideBottomLeft',
          'insideBottomRight'
        ]
        app.configParameters = {
          rotate: {
            min: -90,
            max: 90
          },
          align: {
            options: {
              left: 'left',
              center: 'center',
              right: 'right'
            }
          },
          verticalAlign: {
            options: {
              top: 'top',
              middle: 'middle',
              bottom: 'bottom'
            }
          },
          position: {
            options: posList.reduce(function (map, pos) {
              map[pos] = pos
              return map
            }, {})
          },
          distance: {
            min: 0,
            max: 100
          }
        }
        app.config = {
          // 控制图上标签的角度
          rotate: 90,
          // 控制图上标签的上下位置
          align: 'left',
          // 控制图上标签的左右位置
          verticalAlign: 'middle',
          // 控制图上标签的上下左右位置
          position: 'insideBottom',
          // 控制图上标签距离x轴的距离
          distance: 15,
          onChange: function () {
            const labelOption = {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance
            }
            myChart.setOption({
              series: [
                {
                  label: labelOption
                },
                {
                  label: labelOption
                },
                {
                  label: labelOption
                },
                {
                  label: labelOption
                }
              ]
            })
          }
        }
        const labelOption = {
          // 是否展示控制栏
          show: false,
          // 开启对下列参数的控制
          position: app.config.position,
          distance: app.config.distance,
          align: app.config.align,
          verticalAlign: app.config.verticalAlign,
          rotate: app.config.rotate,
          // 标签上的文字信息
          formatter: '{c}  {name|{a}}',
          // 表现上数字的大小
          fontSize: 18,
          rich: {
            name: {}
          }
        }
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          title: {
            text: '学院对比图',
            left: 'center',
            padding: [30, 20, 100, 100],
            textStyle: {
              fontWeight: 'normal',
              color: '#0F0F0F',
              fontSize: '15'
            }
          },

          // 选择需要对比的加分原因
          legend: {
            // data: ['计算机科学与信息技术学院', '化学工程学院', '机电工程学院', '数学科学学院']
            data: this.reasonList
            // data: ['劳动养成', '学生诚信', '思想道德', '日常规范', '言行文明']
          },
          // 右侧工具栏
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: { show: true },
              // 数据视图
              dataView: { show: true, readOnly: false },
              // 切换为折线图、柱状、堆叠
              magicType: { show: true, type: ['line', 'bar', 'stack'] },
              // 刷新
              restore: { show: true },
              // 保存为图片
              saveAsImage: { show: true }
            }
          },
          // x轴数据
          xAxis: [
            {
              type: 'category',
              axisTick: { show: true },
              data: ['计算机科学与信息技术学院', '经济管理学院', '机电工程学院', '数学科学学院', '外国语学院', '化学工程学院', '体育学院', '法学院', '文学院', '美术与设计学院', '生物工程学院', '教师教育学院'],
              axisLabel: {
                interval: 0,
                formatter: function (params) {
                  var newParamsName = ''
                  const paramsNameNumber = params.length
                  const provideNumber = 6 // 单行显示文字个数
                  const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                  if (paramsNameNumber > provideNumber) {
                    for (let p = 0; p < rowNumber; p++) {
                      var tempStr = ''
                      var start = p * provideNumber
                      var end = start + provideNumber
                      if (p === rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber)
                      } else {
                        tempStr = params.substring(start, end) + '\n'
                      }
                      newParamsName += tempStr
                    }
                  } else {
                    newParamsName = params
                  }
                  return newParamsName
                }
              }
            }
          ],
          // y轴数据
          yAxis: [
            {
              type: 'value'
            }
          ],
          'dataZoom': [{
            'show': true,
            'height': 20,
            'xAxisIndex': [
              0
            ],
            bottom: '1%',
            'start': 10,
            'end': 90,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '100%',
            handleStyle: {
              color: '#36cbcb'
            },
            borderColor: '#fff'
          }],
          series: [
            {
              name: '劳动养成',
              type: 'bar',
              barGap: 0,
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: this.reasonMap['劳动养成'],
              itemStyle: {
                color: '#46a4f7'
              }
            },
            {
              name: '学生诚信',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: this.reasonMap['学生诚信'],
              itemStyle: {
                color: '#36cbcb'
              }
            },
            {
              name: '思想道德',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: this.reasonMap['思想道德'],
              itemStyle: {
                color: '#11D074'
              }
            },
            {
              name: '日常规范',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: this.reasonMap['日常规范'],
              itemStyle: {
                color: '#fad337'
              }
            },
            {
              name: '言行文明',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: this.reasonMap['言行文明'],
              itemStyle: {
                color: '#a161f0'
              }
            }
          ]
        }
        option && myChart.setOption(option)
      }
    }
  }
</script>
